/**
 * $.ImageBrowser
 * $date:2008-12-09$
 */
$.ImageBrowser = $({
    __init : function (sets) {
        var list = [], _t = this, sets = sets || {};
        this.sets = $.extend({
            marginTop : 100,
            msgClass : 'image-browser-msg',
            getInfos : function (e) { return e.title },
            getTitleHtml : function (infos) { return infos }
        }, sets || {});
        var path_exp = sets.path_exp || 'a[@rel=image-browser]';
		$(path_exp).each(function (a) {
            $a = $(a);
            list.push({
                'src' : $a.$('href'),
                infos : _t.sets.getInfos($a[0])
            });
            $a.click(_t.__show.bindAsEventListener(_t, list.length - 1));
        });	

        this.list = list;
        
        this.$wrapper = $('#image-browser');
        this.$bg = $('#image-browser-bg');
        this.$cnt = $('#image-browser-container');
        this.$title = $('#image-browser-title');
        this.$loading = $("#image-browser-loading");
        this.$img = $('#image-browser-image');

        this.currentIndex = -1;
        //?
        this.de = document.documentElement;

        this.$wrapper.css('height:' + this.de.scrollHeight + 'px');
        
        this.$wrapper.hide();
        this.$loading.show();
        this.$img.hide();

        var close_handler = this.__hide.bind(this);
        this.$wrapper.click(close_handler);
        this.$cnt.click(
            (function(event){
                if ($(event, 'element').tagName != 'A')
                $(event, 'stop')
            }
            ).bindAsEventListener(null)
        );
        this.$wrapper.find('.image-browser-close').click(close_handler);
        this.$wrapper.find('.image-browser-prev').click(this.__prev.bindAsEventListener(this));
        this.$wrapper.find('.image-browser-next').click(this.__next.bindAsEventListener(this));
    },

    __hide : function () {
        this.$wrapper.hide();
        this.$loading.show();
        this.$img.hide();
        if (this.originWidth) {
            this.$cnt.css('width:' + this.originWidth + 'px');
        }
    },

    __show : function (event, index) {
        if (event) $(event, 'stop');
        var data = this.list[index];

        this.$cnt.css('margin-top:' + (this.sets.marginTop + this.de.scrollTop) + 'px');
        this.$title.html(this.sets.getTitleHtml(data.infos));
        this.$wrapper.show();
        this.$loading.show();
        this.$img.hide();
        if (!this.originWidth) {
            this.originWidth = parseInt(this.$cnt.css('width'));
            if (isNaN(this.originWidth)) this.originWidth.$('offsetWidth');
        }
        var img = new Image();
        img.onload = this.__onload.bind(this, index, img);
        img.onerror = img.onabort = this.__onerr.bind(this, index, img);
        img.src = data.src;
        this.currentIndex = index;
    },

    __onload : function (index, img) {
  //      console.log('loaded ' + img.src); 
        var data = this.list[index];
        if (index != this.currentIndex) return;
        this.$img.html('<img src="{0}"/>'.format(data.src));
        this.$loading.hide();
        this.$img.show();
        var $img = this.$img.find('img');
        var imgw = $img[0].offsetWidth, m_left = $img[0].offset
    },

    __onerr : function (index, img) {
        //        console.log('load err ' + img.src);
        if (index != this.currentIndex) return;
        this.__msg('加载图片失败。');
    },

    __msg : function (s) {
        this.$img.html('<b class="{0}">{1}</b>'.format(this.sets.msgClass, s));
        this.$loading.hide();
        this.$img.show();
    },

    __prev : function (event) {
        $(event, 'stop');
        if (this.currentIndex <= 0) return this.__msg("当前已是第一张");
        this.__show(event, this.currentIndex - 1);
    },

    __next : function (event) {
        $(event, 'stop');
        if (this.currentIndex >= this.list.length - 1) return this.__msg("当前已是最后一张");
        this.__show(event, this.currentIndex + 1);
    }
});
